<template>
  <div class="indexall">
    <div class="aside">
      <el-menu
        :default-active="path"
        class="el-menu-vertical-demo real"
        @open="handleOpen"
        @close="handleClose"


        :router="true"
      >
        <el-menu-item v-for="item in list " :index="item.path">
          <span slot="title">{{ item.name }}</span>
        </el-menu-item>
        <!--        <el-menu-item index="/search">-->
        <!--          <span slot="title">搜索页面</span>-->
        <!--        </el-menu-item>-->
        <!--        <el-menu-item index="/type">-->
        <!--          <span slot="title">商品类别管理</span>-->
        <!--        </el-menu-item>-->

        <!--        <el-menu-item index="/product">-->
        <!--          <span slot="title">商品管理</span>-->
        <!--        </el-menu-item>-->

        <!--        <el-menu-item index="/questionall">-->
        <!--          <span slot="title">全部问题</span>-->
        <!--        </el-menu-item>-->

        <!--        <el-menu-item index="/adduser">-->
        <!--          <span slot="title">用户管理</span>-->
        <!--        </el-menu-item>-->

        <el-menu-item>
          <span slot="title" @click="logout">退出登录</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="content">
      <router-view/>
    </div>
  </div>


</template>

<script>
import myaxios from "../config/myaxios";
import VueRouter from "../router/index.js"

export default {
  name: "IndexPage",
  data() {
    return {
      path: "",
      role: "",
      list: []
    }
  },
  created() {
    this.getuserMessage()

  },
  methods: {
    getuserMessage() {
      myaxios.get("user/get/login").then(res => {

        if (res.data.code === 0) {
          this.role = res.data.data.userRole
        } else {
          this.role = "user"
        }
        // 处理
        this.list = VueRouter.options.routes[1].children;
        console.log(this.list)
        var newlist = this.list.filter(item => {
          console.log(item.meta)
          return item.meta.isAside && item.meta.requiredRoles.includes(this.role)
        })
        this.list = newlist
        console.log(this.list)
        this.path = this.$route.path;
      }).catch(err => {

        this.$message.error("系统繁忙，请重试")

      })
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    logout() {
      myaxios.post("user/logout")
      this.$router.push("/")
    }
  }
}
</script>

<style scoped>

.indexall {
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  /*border: 1px solid red;*/
  position: absolute;
}


.indexall .aside {

  width: 200px;
  position: sticky;
  top: 0;
  height: 100%;
  /*max-height: 100%;*/
  /*height: auto;*/
  /*border: 1px solid red;*/
  /*background-color: #545c64;*/
  /*min-height: 100vh;*/
}


.content {
  width: 80%;
  padding: 10px;
}
</style>
